<template>
  <div>
    <el-card shadow="never">
      <div class="title">成功率/转化率</div>
      <div ref="orderNumber" class="h-[350px]"></div>
    </el-card>
  </div>
</template>

<script setup>
import { getSuccessRate } from '@/api/index';
import { useDebounceFn } from '@vueuse/core';
import * as echarts from 'echarts';
const orderNumber = ref();
const props = defineProps({
  dateList: {
    type: Array,
    default: () => []
  },
  queryParams: {
    type: Object,
    default: () => {}
  }
});
const isFirst = ref(true);
const debouncedFn = useDebounceFn(() => {
  initOrderNumber();
}, 500);

let myChart = null;
const initOrderNumber = () => {
  if (myChart) {
    myChart.dispose();
  }
  myChart = echarts.init(orderNumber.value);
  let seriesData = [
    {
      data: dataInfo.value.values,
      name: '成功率',
      title: '成功率',
      type: 'line',
      symbolSize: '10',
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(177, 101, 233, 0.5)' },
          { offset: 0.7, color: 'rgba(177, 101, 233, 0)' }
        ])
      },
      lineStyle: {
        color: '#b165e9'
      },
      label: {
        show: true,
        formatter: '{c}%'
      },
      itemStyle: {
        color: '#b165e9'
      }
    },
    {
      data: dataInfo.value.transformRate,
      name: '转化率',
      title: '转化率',
      type: 'line',
      symbolSize: '10',
      lineStyle: {
        color: '#b165e9'
      },
      label: {
        show: true,
        formatter: '{c}%'
      },
      itemStyle: {
        color: '#b165e9bf'
      }
    }
  ];
  let option = {
    xAxis: {
      type: 'category',
      data: dataInfo.value.keys,
      axisTick: {
        show: false
      }
    },
    grid: {
      left: 20,
      right: 40,
      bottom: 20,
      top: 50,
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      },
      padding: [5, 10]
    },
    legend: {
      data: ['成功率', '转化率']
    },
    yAxis: {
      axisTick: {
        show: false
      }
    },
    series: seriesData
  };
  option && myChart.setOption(option);
};

const dataInfo = ref({});
const getData = async () => {
  let res = await getSuccessRate(props.queryParams);
  dataInfo.value = res.data;
  debouncedFn();
};

defineExpose({ getData });

onMounted(() => {
  window.addEventListener('resize', () => {
    myChart?.resize();
  });
});
</script>

<style lang="scss" scoped></style>
